<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
    <script src="js/OBJLoader86r.js"></script>
</head>

<body>

    <script>
        var container;

        var camera, scene, renderer;

        var mouseX = 0,
            mouseY = 0;
        var mesh, materialShader;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 100;

            scene = new THREE.Scene();


            //LIGHTS

            var hemi = new THREE.HemisphereLight(0x02c7dd, 0x080820, 1);
            scene.add(hemi);
            var point = new THREE.PointLight(0x94b1e0, 1, 82);
            point.position.set(50, 50, 50);
            scene.add(point);

            var manager = new THREE.LoadingManager();
            manager.onProgress = function(item, loaded, total) {

                console.log(item, loaded, total);

            };

            var onProgress = function(xhr) {
                if (xhr.lengthComputable) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log(Math.round(percentComplete, 2) + '% downloaded');
                }
            };

            var onError = function(xhr) {};


            var material = new THREE.MeshPhongMaterial({
                color: 0x6ADFFF,
                shininess: 30
            });;
            material.onBeforeCompile = function(shader) {
                shader.uniforms.time = {
                    value: 0
                };
                shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
                shader.vertexShader = shader.vertexShader.replace(
                    '#include <begin_vertex>', [
                        'float theta = sin( time + position.x ) / 2.0;',
                        'float c = cos( theta );',
                        'float s = sin( theta );',
                        'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
                        'vec3 transformed = vec3( position ) * m;',
                        'vNormal = vNormal * m;'
                    ].join('\n')
                );
                materialShader = shader;
            };

            // model

            var loader = new THREE.OBJLoader(manager);
            loader.load('./models/mes.obj', function(object) {

                object.traverse(function(child) {

                    if (child instanceof THREE.Mesh) {

                        child.material = material;

                    }

                });

                object.position.y = -22;
                object.scale.x = 7;
                object.scale.y = 7;
                object.scale.z = 7;
                scene.add(object);

            }, onProgress, onError);

            //

            //BACKGROUND

            var cylinder = new THREE.CylinderBufferGeometry(20, 20, 32, 32);
            cylinder.scale(-40, 40, 40);

            THREE.TextureLoader.prototype.crossOrigin = 'anonymous';

            var back = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('./texture/sky/city.jpg')
            });

            mesh1 = new THREE.Mesh(cylinder, back);
            scene.add(mesh1);
            mesh1.position.z = -130;
            mesh1.rotation.y = 7;
            mesh1.rotation.x = -0.15;

            renderer = new THREE.WebGLRenderer({
                alpha: true
            });
            renderer.setClearColor(0x000000, 0);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);

            document.addEventListener('mousemove', onDocumentMouseMove, false);

            //

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function onDocumentMouseMove(event) {

            mouseX = (event.clientX - windowHalfX) / 4;

        }

        //

        function animate() {

            requestAnimationFrame(animate);
            render();

        }

        function render() {

            camera.position.x += (mouseX - camera.position.x) * .006;
            camera.lookAt(scene.position);


            if (mesh) {
                mesh.rotation.y += 0.05 * (targetX - mesh.rotation.y);
                mesh.rotation.x += 0.05 * (targetY - mesh.rotation.x);
            }
            if (materialShader) {
                materialShader.uniforms.time.value = performance.now() / 400;
            }

            renderer.render(scene, camera);
            renderer.domElement.id = 'c';

        }
    </script>
</body>

</html>